import { NavLink } from 'react-router'
import { Card, Row, Col, Button, Typography, Space } from 'antd'
import {
  ArrowUpOutlined,
  ArrowDownOutlined,
  MoreOutlined
} from '@ant-design/icons'
import React from 'react'

const { Title, Text } = Typography

const Dashboard: React.FC = () => {
  return (
    <div
      className="dashboard-container"
      style={{ padding: '20px', background: '#f0f2f5' }}
    >
      <Row gutter={[16, 16]}>
        {/* 今日销售统计卡片 */}
        <Col xs={24} sm={8}>
          <Card variant="outlined">
            <Title level={2} style={{ margin: 0 }}>
              28
            </Title>
            <Text type="secondary">Продаж за сегодня</Text>
            <div style={{ marginTop: '8px' }}>
              <Text type="secondary">13/09</Text>
              <ArrowUpOutlined
                style={{ color: '#52c41a', marginLeft: '8px' }}
              />
            </div>
          </Card>
        </Col>

        {/* 今日收入统计卡片 */}
        <Col xs={24} sm={8}>
          <Card variant="outlined">
            <Title level={2} style={{ margin: 0 }}>
              59 325 тг
            </Title>
            <Text type="secondary">Заработано за сегодня</Text>
            <div style={{ marginTop: '8px' }}>
              <Text type="secondary">13/09</Text>
              <ArrowDownOutlined
                style={{ color: '#ff4d4f', marginLeft: '8px' }}
              />
            </div>
          </Card>
        </Col>

        {/* 今日新客户统计卡片 */}
        <Col xs={24} sm={8}>
          <Card variant="outlined">
            <Title level={2} style={{ margin: 0 }}>
              11
            </Title>
            <Text type="secondary">Новых покупателей за сегодня</Text>
            <div style={{ marginTop: '8px' }}>
              <Text type="secondary">13/09</Text>
              <ArrowDownOutlined
                style={{ color: '#ff4d4f', marginLeft: '8px' }}
              />
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        {/* 周销售统计卡片 */}
        <Col xs={24} sm={8}>
          <Card variant="outlined">
            <Title level={2} style={{ margin: 0 }}>
              191
            </Title>
            <Text type="secondary">Продаж за неделю</Text>
            <div style={{ marginTop: '8px' }}>
              <Text type="secondary">06/10 — 12/10</Text>
              <ArrowUpOutlined
                style={{ color: '#52c41a', marginLeft: '8px' }}
              />
            </div>
          </Card>
        </Col>

        {/* 周收入统计卡片 */}
        <Col xs={24} sm={8}>
          <Card variant="outlined">
            <Title level={2} style={{ margin: 0 }}>
              859 450 тг
            </Title>
            <Text type="secondary">Заработано за неделю</Text>
            <div style={{ marginTop: '8px' }}>
              <Text type="secondary">06/10 — 12/10</Text>
              <ArrowDownOutlined
                style={{ color: '#ff4d4f', marginLeft: '8px' }}
              />
            </div>
          </Card>
        </Col>

        {/* 周新客户统计卡片 */}
        <Col xs={24} sm={8}>
          <Card variant="outlined">
            <Title level={2} style={{ margin: 0 }}>
              85
            </Title>
            <Text type="secondary">Новых покупателей за неделю</Text>
            <div style={{ marginTop: '8px' }}>
              <Text type="secondary">06/10 — 12/10</Text>
              <ArrowUpOutlined
                style={{ color: '#52c41a', marginLeft: '8px' }}
              />
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        {/* 销售统计图表 */}
        <Col xs={24} lg={16}>
          <Card title="Статистика продаж" variant="outlined">
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: '16px'
              }}
            >
              <div>
                <Title level={5}>Торговые точки</Title>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center'
                    }}
                  >
                    <Space>
                      <div
                        style={{
                          width: '10px',
                          height: '10px',
                          borderRadius: '50%',
                          background: '#1890ff'
                        }}
                      ></div>
                      <Text>Smart Арнау</Text>
                    </Space>
                    <Text strong>1 800 550 тг</Text>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      opacity: 0.5
                    }}
                  >
                    <Space>
                      <div
                        style={{
                          width: '10px',
                          height: '10px',
                          borderRadius: '50%',
                          background: '#13c2c2'
                        }}
                      ></div>
                      <Text>Smart Ишим</Text>
                    </Space>
                    <Text>1 500 311 тг</Text>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      opacity: 0.5
                    }}
                  >
                    <Space>
                      <div
                        style={{
                          width: '10px',
                          height: '10px',
                          borderRadius: '50%',
                          background: '#722ed1'
                        }}
                      ></div>
                      <Text>Smart Лазурный</Text>
                    </Space>
                    <Text>1 100 625 тг</Text>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center'
                    }}
                  >
                    <Space>
                      <div
                        style={{
                          width: '10px',
                          height: '10px',
                          borderRadius: '50%',
                          background: '#52c41a'
                        }}
                      ></div>
                      <Text>Smart Эдем</Text>
                    </Space>
                    <Text strong>300 845 тг</Text>
                  </div>
                </Space>
              </div>
              <div>
                <Space>
                  <Button type="text">Неделя</Button>
                  <Button type="text">Месяц</Button>
                  <Button type="primary">Год</Button>
                </Space>
              </div>
            </div>
            <div
              style={{
                height: '250px',
                background: '#fafafa',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <Text type="secondary">Здесь будет график продаж</Text>
            </div>
          </Card>
        </Col>

        {/* 余额卡片 */}
        <Col xs={24} lg={8}>
          <Card variant="outlined" style={{ marginBottom: '16px' }}>
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center'
              }}
            >
              <div>
                <Title level={2} style={{ margin: 0 }}>
                  212 695.80 тг
                </Title>
                <Text type="secondary">Баланс</Text>
              </div>
              <MoreOutlined style={{ fontSize: '20px' }} />
            </div>
            <Button type="primary" block style={{ marginTop: '16px' }}>
              Пополнить баланс
            </Button>
          </Card>

          {/* 交易历史 */}
          <Card
            title="История транзакций"
            variant="outlined"
            extra={<a href="#">Все</a>}
            style={{ height: '300px' }}
          >
            <Space direction="vertical" style={{ width: '100%' }}>
              {[
                {
                  type: 'ok',
                  text: 'Оплата счета',
                  amount: '+1565 тг',
                  time: '15:30'
                },
                {
                  type: 'withdraw',
                  text: 'Вывод средств',
                  amount: '−85598 тг',
                  time: '15:30'
                },
                {
                  type: 'ok',
                  text: 'Оплата счета',
                  amount: '+1565 тг',
                  time: '15:30'
                },
                {
                  type: 'plus',
                  text: 'Пополнение',
                  amount: '+154485 тг',
                  time: '15:30'
                },
                {
                  type: 'ok',
                  text: 'Оплата счета',
                  amount: '+1565 тг',
                  time: '15:30'
                }
              ].map((item, index) => (
                <div
                  key={index}
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    padding: '8px 0',
                    borderBottom: '1px solid #f0f0f0'
                  }}
                >
                  <Space>
                    <div
                      style={{
                        width: '24px',
                        height: '24px',
                        borderRadius: '50%',
                        background:
                          item.type === 'ok'
                            ? 'rgba(82, 196, 26, 0.2)'
                            : item.type === 'withdraw'
                              ? 'rgba(82, 196, 26, 0.2)'
                              : 'rgba(255, 255, 255, 0.2)',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                      }}
                    >
                      {item.type === 'ok' && (
                        <span style={{ color: '#52c41a' }}>✓</span>
                      )}
                      {item.type === 'withdraw' && (
                        <span style={{ color: '#52c41a' }}>↓</span>
                      )}
                      {item.type === 'plus' && (
                        <span style={{ color: '#ffffff' }}>+</span>
                      )}
                    </div>
                    <Text>{item.text}</Text>
                  </Space>
                  <div>
                    <div style={{ textAlign: 'right' }}>
                      <Text>{item.amount}</Text>
                    </div>
                    <div>
                      <Text type="secondary">{item.time}</Text>
                    </div>
                  </div>
                </div>
              ))}
            </Space>
          </Card>
        </Col>
      </Row>

      <div style={{ marginTop: '20px' }}>
        <NavLink to="/" style={{ display: 'block', marginTop: '20px' }}>
          Вернуться на главную
        </NavLink>
      </div>
    </div>
  )
}

export default Dashboard
